/**
 * 常用组合类
 * 提供常用的样式组合，可以直接在模板中使用
 * 这些类组合了多个工具类，提供更便捷的使用方式
 */

/* Flex 布局组合类 */
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.flex-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.flex-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.flex-evenly {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.flex-col-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flex-col-between {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.flex-col-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.flex-col-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}

.flex-col-around {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

.flex-col-evenly {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

/* 居中组合类 */
.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.center-x {
	display: flex;
	justify-content: center;
}

.center-y {
	display: flex;
	align-items: center;
}

.center-absolute {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.center-fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 全屏覆盖组合类 */
.absolute-full {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.fixed-full {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 文本居中组合类 */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* 文本溢出组合类 */
.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-ellipsis-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.text-ellipsis-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 滚动组合类 */
.scroll-x {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.scroll-y {
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* 卡片组合类 */
.card {
	background-color: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	padding: $uni-spacing-row-base;
}

.card-shadow {
	background-color: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	padding: $uni-spacing-row-base;
	/* #ifdef H5 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	/* #endif */
}

.card-border {
	background-color: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	padding: $uni-spacing-row-base;
	border: 1px solid $uni-border-color;
}

/* 按钮组合类 */
.btn {
	padding: $uni-spacing-col-sm $uni-spacing-row-base;
	border-radius: $uni-border-radius-base;
	font-size: $uni-font-size-base;
	text-align: center;
	cursor: pointer;
	/* #ifdef H5 */
	transition: all 0.2s ease;
	/* #endif */
	border: none;
	background-color: transparent;
}

.btn-primary {
	@extend .btn;
	background-color: $uni-color-primary;
	color: $uni-text-color-inverse;
}

.btn-success {
	@extend .btn;
	background-color: $uni-color-success;
	color: $uni-text-color-inverse;
}

.btn-warning {
	@extend .btn;
	background-color: $uni-color-warning;
	color: $uni-text-color-inverse;
}

.btn-error {
	@extend .btn;
	background-color: $uni-color-error;
	color: $uni-text-color-inverse;
}

.btn-ghost {
	@extend .btn;
	border: 1px solid $uni-border-color;
	color: $uni-text-color;
}

/* 尺寸组合类 */
.square-20 {
	width: 20px;
	height: 20px;
}

.square-30 {
	width: 30px;
	height: 30px;
}

.square-40 {
	width: 40px;
	height: 40px;
}

.square-50 {
	width: 50px;
	height: 50px;
}

.square-60 {
	width: 60px;
	height: 60px;
}

.square-80 {
	width: 80px;
	height: 80px;
}

.square-100 {
	width: 100px;
	height: 100px;
}

/* 圆形组合类 */
.circle-20 {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.circle-30 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.circle-40 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.circle-50 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.circle-60 {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.circle-80 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
}

.circle-100 {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

/* 间距组合类 */
.spacing-xs {
	padding: 4px;
}

.spacing-sm {
	padding: $uni-spacing-col-sm;
}

.spacing-md {
	padding: $uni-spacing-row-base;
}

.spacing-lg {
	padding: $uni-spacing-row-lg;
}

/* 边框组合类 */
.border-base {
	border: 1px solid $uni-border-color;
}

.border-top-base {
	border-top: 1px solid $uni-border-color;
}

.border-right-base {
	border-right: 1px solid $uni-border-color;
}

.border-bottom-base {
	border-bottom: 1px solid $uni-border-color;
}

.border-left-base {
	border-left: 1px solid $uni-border-color;
}

/* 圆角组合类 */
.rounded-base {
	border-radius: $uni-border-radius-base;
}

.rounded-lg {
	border-radius: $uni-border-radius-lg;
}

.rounded-full {
	border-radius: 50%;
}

/* 阴影组合类（仅 H5） */
/* #ifdef H5 */
.shadow-sm {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shadow-md {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* #endif */

/* 过渡组合类（仅 H5） */
/* #ifdef H5 */
.transition {
	transition: all 0.2s ease;
}

.transition-fast {
	transition: all 0.15s ease;
}

.transition-slow {
	transition: all 0.3s ease;
}
/* #endif */

